<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" th:href="@{layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{css/index.css}">
</head>
<body>

<div id="main">
    <div id="top">
        <h1>空气质量监测信息库</h1>
        <hr>
    </div>
    <div id="menuBar">
        <span>
            <form method="post" th:action="@{selectByDistrict}">
                按照地区查询：
            <select name="district">
                <option>不限</option>
                <option value="宝体区">宝体区</option>
                <option value="保安区">保安区</option>
                <option value="南山区">南山区</option>
                <option value="福田区">福田区</option>
            </select>
            <button class="layui-btn layui-btn-primary layui-border-blue" type="submit">查询</button>
            </form>
        </span>
        <span>
            <button type="button" class="layui-btn layui-btn-radius" onclick="addData()">添加空气质量信息</button>
        </span>
    </div>
    <div id="business">
        <form>
            <div class="layui-form">
                <table class="layui-table">
                    <colgroup>
                        <col width="150">
                        <col width="150">
                        <col width="200">
                        <col>
                    </colgroup>
                    <thead>
                    <tr>
                        <th>序号</th>
                        <th>区域</th>
                        <th>监测时间</th>
                        <th>PM10数据</th>
                        <th>PM2.5数据</th>
                        <th>监测站</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="air : ${airQualityIndex}">
                        <td th:text="${air.id}"></td>
                        <td th:text="${air.district}"></td>
                        <td th:text="${#dates.format(new java.util.Date(air.monitorTime), 'yyyy-MM-dd')}"></td>
                        <td th:text="${air.pm10}"></td>
                        <td th:text="${air.pm25}"></td>
                        <td th:text="${air.monitoringStation}"></td>
                        <td>
                            <a th:onclick="toUpdateDate([[${air.id}]])">
                                <button type="button" class="layui-btn layui-btn-primary layui-btn-xs">更新</button>
                            </a>
                        </td>
                    </tbody>
                </table>
            </div>
        </form>
    </div>
</div>

</body>
</html>

<script th:src="@{layui/layui.js}" charset="utf-8"></script>
<script th:src="@{layui/layui.all.js}" charset="utf-8"></script>

<script th:inline="javascript">
    function addData() {
        window.location.href = "toAddData";
    }

    function toUpdateDate(id) {
        document.write("<form action='/toUpdateDate' method='post' name='toUpdateDate' style='display:none'>")
        document.write("<input type='hidden' name='id' value='"+ (id) +"'>")
        document.write("</form>")
        document.toUpdateDate.submit();
    }

</script>
